<template>
  <div>
    <div class="grid-content">
      <p style="text-align: right; margin-right: 10px">
        <el-link type="warning" @click="settings" :underline="false"
          ><i
            style="font-size: 24px; text-align: right"
            class="el-icon-setting"
          ></i
        ></el-link>
      </p>
      <el-form
        ref="form"
        :model="list2"
        label-width="80px"
        size="mini"
        style="margin-left: 10px"
      >
        <div style="float: left">
          <el-avatar
            style="width: 40px; height: 40px"
            :src="list2.userImg"
          ></el-avatar>
        </div>
        <div style="">
          <input
            v-model="list2.userNick"
            style="
              border: none;
              background: #383736;
              margin-left: 4%;
              color: aliceblue;
              width: 100px;
              margin-top: -20px;
              font-size: 14px;
              font-weight: 500;
              font-style: oblique;
            "
            disabled
          /><br />
          <a
            data-action="bilog"
            data-log-action="click"
            target="_blank"
            class="m-topvd f-pr m-creator-center"
          >
            &nbsp;&nbsp;&nbsp;{{ vip }}&nbsp;&nbsp;&nbsp;
          </a>
        </div>
      </el-form>
      <div class="www" style="margin-top: 8px">
        <div class="cla" style="color: aliceblue; width: 33%">
          {{ proCount }}<br /><i style="font-size: 14px">商品收藏</i>
        </div>
        <div class="cla" style="color: aliceblue; width: 33%">|</div>
        <div class="cla" style="color: aliceblue; width: 33%">
          {{ comCount }}<br /><i style="font-size: 14px">套餐收藏</i>
        </div>
      </div>
      <div class="orange">
        <span
          style="font-weight: bold; width: 30%; margin-left: 3%; float: left"
        >
          <i>小金卡会员</i>
        </span>
        <div style="width: 30%; margin-left: 3%; margin-top: 3%; float: left">
          <b style="font-size: 14px; font-weight: 400">全场商品九五折</b>
        </div>
        <el-button
          style="
            width: 23%;
            border-radius: 18px;
            margin-top: 2%;
            margin-left: 2%;
          "
          size="small"
          type="warning"
          plain
          >立即购买</el-button
        >
        <div style="float: left; width: 30%; margin-top: -4%; margin-left: 2%">
          <i style="font-size: 12px; font-weight: 80; margin-left: 5%"
            >GOLD CARD</i
          >
        </div>
        <div class="inner">
          <div class="innerIn">
            <div class="cla" @click="addressList" style="">
              <van-icon name="location-o" color="#e5a46c" /><br /><i
                style="font-size: 14px; color: #e5a46c"
                >收货地址</i
              >
            </div>
            <div class="cla" @click="serviceOnline" style="">
              <van-icon name="service-o" color="#e5a46c" /><br /><i
                style="font-size: 14px; color: #e5a46c"
                >在线客服</i
              >
            </div>
            <div class="cla" @click="buyCar" style="">
              <van-icon name="cart-o" color="#e5a46c" /><br /><i
                style="font-size: 14px; color: #e5a46c"
                >购物车</i
              >
            </div>
            <div class="cla" @click="proList" style="">
              <van-icon name="like-o" color="#e5a46c" /><br /><i
                style="font-size: 14px; color: #e5a46c"
                >商品收藏</i
              >
            </div>
            <div class="cla" @click="comboList" style="">
              <van-icon name="star-o" color="#e5a46c" /><br /><i
                style="font-size: 14px; color: #e5a46c"
                >套餐收藏</i
              >
            </div>
            <!-- <div class="cla" @click="pointShop" style="">
              <van-icon name="points" color="#e5a46c" /><br><i style="font-size:14px;color: #e5a46c;">积分商城</i>
            </div> -->

            <div class="cla" @click="moreHelp" style="">
              <van-icon name="bag-o" color="#e5a46c" /><br /><i
                style="font-size: 14px; color: #e5a46c"
                >秒杀订单</i
              >

            </div>
            <div class="cla" @click="moreHelp" style="">
              <van-icon name="bag-o" color="#e5a46c" /><br><i style="font-size:14px;color: #e5a46c;">普通订单</i>
            </div>
          </div>
          <div class="innerIn1">
            <div style="background: #f6f6f6; text-align: center">
              <span
                style="
                  font-size: 24px;
                  font-weight: 800;
                  background-image: linear-gradient(to right, #ff8c00, #ffdf00);
                  -webkit-background-clip: text;
                  color: transparent;
                "
                >猜你喜欢</span
              >
            </div>
            <van-list
              v-model="loading"
              class="shangpin"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div v-for="(list3, index) in list3" :key="index">
                <van-card
                  num="2"
                  :tag="list3.brand"
                  :price="list3.price"
                  :desc="list3.definite"
                  :title="list3.proname"
                  :thumb="list3.proimg"
                  @click="onClick(list3.id)"
                />
              </div>
            </van-list>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      proCount: 0,
      list1: [],
      comCount: 0,
      list2: {},
      vip: "",
      list3: [],
      list: [],
      loading: false,
      finished: false,
    };
  },
  created() {
    this.getList();
    this.getList1();
    this.getList2();
    this.getList3();
  },
  methods: {
    onClick(event) {
      console.log(event);
      this.$router.push({ path: "/xingq" + "", query: { id: event } });
    },
    getList() {
      axios({
        url: "/api/user/getUserById",
        method: "GET",
        params: {
          id: JSON.parse(localStorage.getItem("user")).userId,
        },
      }).then((res) => {
        this.list2 = res.data;
        if (this.list2.userType == 1) {
          this.vip = "管理员";
        } else if (this.list2.userType == 2) {
          this.vip = "会员";
        } else if (this.list2.userType == 3) {
          this.vip = "用户";
        }
        this.getList1();
        this.getList2();
      });
    },
    getList1() {
      //查询收藏商品数量
      axios({
        url: "/api/user/getUserProject",
        method: "GET",
        params: {
          ids: this.list2.userOrder,
        },
      }).then((res) => {
        this.list = res.data;
        console.log(this.list);

        // this.proCount = this.list.length;
        if (this.list[0]) {
          this.proCount = this.list.length;
        }else{
          this.proCount =0
        }
      });
    },
    getList2() {
      //查询收藏套餐数量
      axios({
        url: "/api/user/getComboList",
        method: "GET",
        params: {
          ids: this.list2.userCombo,
        },
      }).then((res) => {
        this.list1 = res.data;
        this.comCount = this.list1.length;
      });
    },
    settings() {
      this.$router.push({ path: "/addBanner" });
    },
    addressList() {
      this.$router.push({ path: "/addressList" });
    },
    getList3() {
      axios({
        url: "/api/user/getProList",
        method: "GET",
      }).then((res) => {
        this.list3 = res.data;
      });
    },
    serviceOnline() {
      this.$router.push({ path: "/ji" });
    },
    buyCar() {
      this.$router.push({ path: "/good" });
    },
    proList() {
      console.log(this.list[0].id);
      this.$router.push({
        path: "/proList" + "",
        query: { id4444: this.list[0].id },
      });
    },
    comboList() {
      this.$router.push({ path: "/comList" });
    },
    moreHelp() {
      this.$router.push({ path: "/dingdan" });
    },
    secKill() {
      this.$router.push({ path: '/killOrder' });
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        axios({
          url: "/api/user/getProList",
          method: "GET",
        }).then((res) => {
          this.list3 = res.data;
        });
        // // 加载状态结束
        this.loading = false;

        // // 数据全部加载完成
        // if (this.list.length >= 40) {
        this.finished = true;
        // }
      }, 1000);
    },
  },
};
</script>

<style>
.grid-content {
  min-height: 150px;
  width: 100%;
  background: #383736;
  float: left;
  position: absolute;
}

.orange {
  width: 96%;
  margin-left: 2%;
  margin-top: 10px;
  height: 45px;
  background: linear-gradient(80deg, #f8d0ae, #fab06e);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  float: left;
}

.headImg {
  width: 96%;
  margin-left: 2%;
  float: left;
}

.m-topvd {
  /* float: left; */
  width: 50px;
  height: 20px;
  font-size: 10px;
  margin-left: 4%;
  box-sizing: border-box;
  border: 1px solid #4f4f4f;
  background-position: 0 -140px;
  color: #ccc;
  border-radius: 10px;
}

.www {
  width: 100%;
  height: 25px;
  margin-top: 50px;
  display: block;
}

.cla {
  float: left;
  text-align: center;
  width: 25%;
  margin-top: 7%;
  /* margin-left: 1%; */
}

.inner {
  /* height: 500px; */
  width: 104%;
  background: #f6f6f6;
  float: left;
  margin-left: -2%;
}

.innerIn {
  height: 150px;
  width: 96%;
  background: #ffffff;
  margin-left: 2%;
  margin-top: 20px;
  border-radius: 10px;
  float: left;
}

.innerIn1 {
  /* height: 300px; */
  width: 96%;
  background: #ffffff;
  margin-left: 2%;
  margin-top: 20px;
  float: left;
}

.shangpin {
  background: #f6f6f6;
}
</style>
